<template>
  <div class="app bg-background text-foreground transition-theme">
    <router-view />
    <!-- 全局消息容器 -->
    <MessageContainer />
    <!-- 全局确认对话框容器 -->
    <ConfirmContainer />
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';

import { getGeneralSettings } from '@/api/system/app';
import audioService from '@/services/audioService';
import { useThemeStore } from '@/stores/theme';

const themeStore = useThemeStore();

onMounted(async () => {
  // 初始化主题
  themeStore.initTheme();

  // 初始化音效服务
  try {
    // 先初始化音效服务（预加载音效文件）
    await audioService.initialize();

    const settingsResult = await getGeneralSettings();
    if (settingsResult.success && settingsResult.data) {
      const { soundEffects } = settingsResult.data;
      audioService.setEnabled(soundEffects);

      // 播放启动音效
      if (soundEffects) {
        // 延迟一点播放，确保应用完全加载
        setTimeout(() => {
          audioService.playStartup();
        }, 500);
      }
    }
  } catch (error) {
    console.error('初始化音效服务失败:', error);
  }
});

onUnmounted(() => {});
</script>

<style lang="scss">
.app {
  min-height: 100vh;
  transition: var(--transition-theme);
}
</style>
